
import React, { useEffect,useRef,useState,createElement } from 'react';
import {Row,Col,Tooltip,Comment,Avatar,Popconfirm} from "antd"
import { ajax } from '../../api';
import moment from "moment"
import { baseURL } from '../../api/http';
import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';


export const Dongtai=({location,history})=>{
    const [list,setList]=useState([])
    
    useEffect(()=>{
        getAlldongtai()
    },[])

    const getAlldongtai=()=>{
        ajax.getAlldongtai().then(res=>{
            if(res.code==200){
                setList(res.result)
            }
        })
    }

    

    const like = (item) => {
        ajax.addlike({
            _id:item._id
        }).then(res=>{
            if(res.code==200){
                getAlldongtai()
            }
        })
    };

    const dislike = (item) => {
        ajax.dislike({
            _id:item._id
        }).then(res=>{
            if(res.code==200){
                getAlldongtai()
            }
        })
    };

    const delconfirm=(item,index)=>{
        ajax.removeOne({
            _id:item._id
        }).then(res=>{
            if(res.code==200){
                var list1 = list.filter(val=>val._id!=item._id)
                setList(list1)
            }
        })
    }

    return(
        <div>
            <Row>
                <Col span={24}>
                    <div style={{width: "100%",background: "#f0f2f5",height:720,padding: 20,marginTop:20,overflowY:"auto",boxShadow:" #ccc 0px 0px 5px 5px"}}>
                        <h3 style={{height:50,lineHeight:"50px", textAlign:"center",fontSize:20,backgroundColor:"#fff"}}>最新动态</h3>
                        <div style={{backgroundColor:"#fff",padding:20}}>
                            {
                                list.length>0?(<div>
                                    {
                                        list.map((item,i)=>{
                                            return (
                                                <Comment
                                                    actions={[
                                                        <Tooltip key="comment-basic-like">
                                                        <span onClick={()=>like(item)}>
                                                            {createElement( (item.likelist).includes(localStorage.getItem("username"))  ? LikeFilled : LikeOutlined )}
                                                            <span className="comment-action">{item.likelist.length}</span>
                                                        </span>
                                                        </Tooltip>,
                                                        <Tooltip key="comment-basic-dislike">
                                                        <span onClick={()=>dislike(item)}>
                                                            {React.createElement((item.dislikelist).includes(localStorage.getItem("username"))  ?  DislikeFilled : DislikeOutlined  )}
                                                            <span className="comment-action">{item.dislikelist.length}</span>
                                                        </span>
                                                        </Tooltip>,
                                                        <Popconfirm
                                                            title="您确定要删除当前动态吗？"
                                                            onConfirm={()=>delconfirm(item,i)}
                                                            okText="确定"
                                                            cancelText="取消"
                                                            disabled={item.username==localStorage.getItem("username")?false:true}
                                                        >
                                                        {
                                                          item.username==localStorage.getItem("username")&&<span key="comment-basic-reply-to">删除</span>
                                                        }
                                                        </Popconfirm>
                                                        
                                                    ]}
                                                    key={i}
                                                    author={<a style={{fontSize:20}}>{item.username}</a>}
                                                    avatar={
                                                        <Avatar
                                                        src={item.avatar.replace(/public/,baseURL)}
                                                        alt="Han Solo"
                                                        />
                                                    }
                                                    content={
                                                        <p>
                                                            {item.content}
                                                        </p>
                                                    }
                                                    datetime={
                                                        <Tooltip>
                                                            <span>{moment(item.time).format('YYYY-MM-DD HH:mm:ss')}</span>
                                                        </Tooltip>
                                                    }
                                                    />
                                            )
                                        })
                                    }
                                </div>):(<div style={{textAlign:"center",fontSize:16,color:"#ccc",Height:"50px",lineHeight:"50px"}}>暂无动态信息,请发布动态</div>)
                            }
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    )
}